<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        a{
            /* 去除超链接下划线 */
            text-decoration: none;
        }
        /* 代码主体 */
        body{
            background-color: #f9f9f9;
        }
        /* 容器盒子 */
        .news{
            width: 670px;
            /* 由内容撑开 */
            height: auto;
            background-color: rgb(255, 255, 255);
            /* 注意：可以在前期编码测试时添加最小高度，撑开盒子，方便调试 */
            min-height: 300px;
            margin: 100px auto;
            overflow: hidden;
        }
        /* 新闻部分 */
        .news_item{
            width: 590px;
            height: auto;
            /* min-height: 200px; */
            /* background:lightblue; */
            /* margin-top: 30px;
            margin-left: auto;
            margin-right: auto; */
            margin: 30px auto 0;
            border-bottom: 1px solid #a5a5a5;
        }
        .news .news_item:last-child{
            border-bottom: none;
            margin-bottom: 20px;
        }
        /* 标题 */
        .news_item h2{
            line-height: 30px;
            font-size: 20px;
            color: #101010;
            font-weight: normal;
        }
        /* 描述 */
        .news_item .desc{
            margin: 10px 0;
            line-height: 30px;
            color: #999;
            font-size: 14px;
        }
        /* 段落 */
        .news_item p {
            font-size: 14px;
            color: #101010;
            line-height: 21px;
            /* 文本缩进---单位em单位 */
            text-indent: 2em;
        }
        /* 图片--直接子元素 */
        .news_item>img{
            width: 590px;
            height: 300px;
            display: block;
            margin: 10px 0;
        }
        /* 分类关键词 */
        .news_item a{
            border-radius: 20px;
            color: #fff;
            font-size: 14px;
            line-height: 30px;
            /* a标签属于行内元素，无法直接设置宽高 */
            display: inline-block;
            padding: 0 14px;
            margin-bottom: 10px;
        }
        .news_item a img{
            width: 14px;
            height: 14px;
            margin-right: 4px;
            vertical-align: text-top;
            margin-top: 3px;
        }
        .news_item a:nth-of-type(1){
            margin-right: 20px;
            background-color: rgba(2, 153, 255, .6);
        }
        .news_item a:nth-of-type(2){
            background-color: rgba(255, 96, 91, .6);
        }
    </style>
</head>
<body>
    <!-- 容器盒子 -->
    <div class="news">
        <!-- 新闻部分1 -->
        <div class="news_item">
            <!-- 标题 -->
            <h2>智能汽车产业链加码驶入快车道，增长趋势明显!</h2>
            <!-- 细节描述-日期、发布单位 -->
            <div class="desc">
                汽车制造 / 科技菌 &#183; 2022-06-13
            </div>
            <!-- 段落 -->
            <p>智能汽车时代的到来，不仅出行方式发生颠覆，从内核到配件，行业也不断迎来一次又一次的大变革。随着智能网联汽车时代的到来，我国汽车零部件行业迎来弯道超车。</p>
            <p>传统供应链巨头环绕的局面逐渐瓦解，智能网联汽车企业聚焦“自动驾驶”等极具竞争力的功能配件上，也因此更关注技术上游企业，具备长期科研能力的产品与方案更顺应市场变化。</p>
            <!-- 图片 -->
            <img src="./imgs/news2.png" alt="">
            <!-- 分类关键词 -->
            <a href="">
                <img src="./imgs/1.png" alt="">智能汽车
            </a>
            <a href="">
                <img src="./imgs/2.png" alt="">汽车自动驾驶
            </a>
        </div>
        <!-- 新闻部分2 -->
        <div class="news_item">
            <!-- 标题 -->
            <h2>5G步入规模化应用关键期!</h2>
            <!-- 细节描述-日期、发布单位 -->
            <div class="desc">
                通讯技术 / 工匠派 &#183; 2022-06-13
            </div>
            <!-- 段落 -->
            <p>工业和信息化部将全面加强新型信息基础设施建设,推动5G网络深度覆盖,实施5G应用“扬帆”行动计划,加快5G等新兴技术规模化应用,继续扩大产业开放合作</p>
            <!-- 图片 -->
            <img src="./imgs/5g.jpg" alt="">
            <!-- 分类关键词 -->
            <a href="">
                <img src="./imgs/1.png" alt="">智通讯技术
            </a>
        </div>
        <!-- 新闻部分3 -->
        <div class="news_item">
            <!-- 标题 -->
            <h2>中国天眼发现地外文明可疑信号，相关团队正进一步排查</h2>
            <!-- 细节描述-日期、发布单位 -->
            <div class="desc">
                地外文明 / 科技日报 &#183; 2022-06-14
            </div>
            <!-- 段落 -->
            <p>日前，在启动对地外文明的搜索后，“中国天眼”取得重要进展。发现几个不同于以往的窄带电磁信号，目前团队正在抓紧进一步排查中。</p>
        </div>
    </div>
</body>
</html>